{{#contentFor "pageCss"}}
<link rel="stylesheet" href="{{Views.Assets_Path}}/build_css/product/product_build.css">
{{/contentFor}}

<div class="product-page">
    <div class="other-page-banner">
        <div class="container_12">
            U sky 我们提供是互联网模式下的酒店经营之道
        </div>
    </div>
    <div class="product-introduction container_12">
        <h1 class="intro-title">我们的产品非常牛逼</h1>
    </div>
    <div class="product-container container_12">
        <div style="position: relative;">
            <div class="product-tab-container clearfix ">
                <div class="product-tab active" data-scroll-target="prod-1">我们的优势</div>
                <div class="product-tab" data-scroll-target="prod-2">产品功能</div>
                <div class="product-tab" data-scroll-target="prod-3">案例</div>
                <div class="product-tab" data-scroll-target="prod-4">产品帮助</div>
            </div>
            <div style="height: 60px;"></div>
        </div>
        <div class="product-info" id="prod-1">
            <div class="pi-title">这里是产品优势</div>
            <div class="pi-img">
                <img src="{{getStatic 'images/home/1.png'}}">
            </div>
        </div>
        <div class="product-info" id="prod-2">
            <div class="pi-title">这里是产品功能</div>
            <div class="pi-img">
                <img src="{{getStatic 'images/home/1.png'}}">
            </div>
        <div class="product-info" id="prod-3">
            <div class="pi-title">这里是案例</div>
            <div class="pi-img">
                <img src="{{getStatic 'images/home/1.png'}}">
            </div>
        </div>
        <div class="product-info" id="prod-4">
            <div class="pi-title">这里是产品帮助</div>
            <div class="pi-img">
                <img src="{{getStatic 'images/home/1.png'}}">
            </div>
        </div>
    </div>
</div>

{{#contentFor "pageJs"}}
<script src="{{Views.Assets_Path}}/js/lib/jquery.scrollTo.js"></script>
<script>
    $productTab = $('.product-tab');
    $productTabContainer=$('.product-tab-container')
    $productInfo = $('.product-info')

    $productTab.click(function(){
        var $this = $(this)
        var _id = $this.attr('data-scroll-target')

        $(window).scrollTo('#'+_id,600,{
            offset:{
                top:-60
            }
        })
        
    })

    var tabHeight = 60;

    $(window).scroll(function(){
        var winTop = $(window).scrollTop();
        var infoIndex = -1;
        for(var i = 0;i<$productInfo.length;i++){
            var $p = $productInfo.eq(i)
            if(winTop + tabHeight+5 > $p.offset().top){
                infoIndex = i;
            }
        }
        if(infoIndex!=-1){
            $productTabContainer.addClass('fixed-tabs')
            $productTab.removeClass('active')
                    .eq(infoIndex).addClass('active')
        }else{
            $productTabContainer.removeClass('fixed-tabs')
        }
    })
</script>
{{/contentFor}}

